<template>
  <div class="dashboard-container">
    <el-row>
      <el-col :span="18">
        <el-row>
          <el-col :span="13" style="padding-left: 10px; padding-right: 10px;">
            <div class="bgc1">
              <div class="header">
                <div class="title">
                  工单统计
                  <span class="sub-title">2022.10.01 ~ 2022.10.29</span>
                </div>
              </div>
              <div class="body">
                <div class="stats">
                  <div class="item">
                    <div class="num">{{ total }}</div>
                    <div class="text">工单总数（个）</div>
                  </div>
                </div>
                <div class="stats">
                  <div class="item">
                    <div class="num">{{ completedTotal }}</div>
                    <div class="text">完成工单（个）</div>
                  </div>
                </div>
                <div class="stats">
                  <div class="item">
                    <div class="num">{{ progressTotal }}</div>
                    <div class="text">进行工单（个）</div>
                  </div>
                </div>
                <div class="stats">
                  <div class="item">
                    <div class="num">{{ cancelTotal }}</div>
                    <div class="text">取消工单（个）</div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="11" style="padding-left: 10px; padding-right: 10px;">
            <div class="bgc2">
              <div class="header">
                <div class="title">
                  销售统计
                  <span class="sub-title">2022.10.01 ~ 2022.10.29</span>
                </div>
              </div>
              <div class="body">
                <div class="stats">
                  <div class="item">
                    <div class="num">13512</div>
                    <div class="text">订单量（个）</div>
                  </div>
                </div>
                <div class="stats">
                  <div class="item">
                    <div class="num">8.85</div>
                    <div class="text">销售额（万元）</div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <div class="sku-sale-collect">
          <div class="header">
            <div class="title">
              销售数据
              <span class="sub-title">2022.01.01 ~ 2022.10.29</span>
            </div>
            <div class="week-month-year">
              <div :class="{item,isChecked:ind === index}"
                   v-for="(item,index) in choose"
                   :key="index"
                   @click="getInfo(index)"
              >{{ item }}
              </div>
            </div>
          </div>
          <div class="charts">
            <e-charts class="chart" :option="option1"/>
            <e-charts class="chart" :option="option1"/>
          </div>
        </div>
      </el-col>
      <el-col :span="6" style="padding-left: 10px; padding-right: 10px;">
        <div class="bg3">
          <div class="header">
            <div class="title">
              商品热榜
              <span class="sub-title">2022.10.01 ~ 2022.10.29</span>
            </div>
          </div>
          <div class="body">
            <el-row>
              <el-col :span="5">1</el-col>
              <el-col :span="13">2</el-col>
              <el-col :span="6">3</el-col>
            </el-row>
            <el-row>
              <el-col :span="5">1</el-col>
              <el-col :span="13">2</el-col>
              <el-col :span="6">3</el-col>
            </el-row>
            <el-row>
              <el-col :span="5">1</el-col>
              <el-col :span="13">2</el-col>
              <el-col :span="6">3</el-col>
            </el-row>
            <el-row>
              <el-col :span="5">1</el-col>
              <el-col :span="13">2</el-col>
              <el-col :span="6">3</el-col>
            </el-row>
            <el-row>
              <el-col :span="5">1</el-col>
              <el-col :span="13">2</el-col>
              <el-col :span="6">3</el-col>
            </el-row>
            <el-row>
              <el-col :span="5">1</el-col>
              <el-col :span="13">2</el-col>
              <el-col :span="6">3</el-col>
            </el-row>
            <el-row>
              <el-col :span="5">1</el-col>
              <el-col :span="13">2</el-col>
              <el-col :span="6">3</el-col>
            </el-row>
            <el-row>
              <el-col :span="5">1</el-col>
              <el-col :span="13">2</el-col>
              <el-col :span="6">3</el-col>
            </el-row>
            <el-row>
              <el-col :span="5">1</el-col>
              <el-col :span="13">2</el-col>
              <el-col :span="6">3</el-col>
            </el-row>
            <el-row>
              <el-col :span="5">1</el-col>
              <el-col :span="13">2</el-col>
              <el-col :span="6">3</el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row style="margin-left: -10px; margin-right: -10px; margin-top: 20px;">
      <el-col :span="14" style="padding-left: 10px; padding-right: 10px;">
        <div class="partner-node-collect">合作商点位数Top5</div>
      </el-col>
      <el-col :span="10" style="padding-left: 10px; padding-right: 10px;">
        <div class="abnormal-equipment">异常设备监控</div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { lOption } from '@/db/option'
import { getRegionCollectAPI, getSalesStatisticsAPI } from '@/api/workbench'
import { getTaskReportInfoAPI } from '@/api/customerService'

export default {
  name: 'Dashboard',
  data() {
    return {
      TaskReportInfo: [],
      option1: lOption(),
      choose: ['周', '月', '年'],
      ind: 0
      // option1: {
      //   title: {
      //     text: '销售额趋势图',
      //     left: 'center',
      //     textStyle: {
      //       fontSize: 14
      //     }
      //   },
      //   xAxis: {
      //     type: 'category',
      //     data: []
      //   },
      //   yAxis: {
      //     type: 'value',
      //     name: '单位:元'
      //   },
      //   series: [
      //     {
      //       data: [],
      //       type: 'line',
      //       smooth: true,
      //       lineStyle: {
      //         color: '#ff5757'
      //       },
      //       itemStyle: {
      //         normal: {
      //           color: '#ff5757'
      //         }
      //       },
      //       areaStyle: {
      //         normal: {
      //           color: {
      //             x: 0,
      //             y: 0,
      //             x2: 0,
      //             y2: 1,
      //             colorStops: [
      //               {
      //                 offset: 0,
      //                 color: '#dc3881' // 0% 处的颜色
      //               }, {
      //                 offset: 1,
      //                 color: 'rgba(254,212,212,0)' // 100% 处的颜色
      //               }
      //             ],
      //             globalCoord: false // 缺省为 false
      //           }
      //         }
      //       }
      //     }
      //   ],
      //   tooltip: {
      //     show: true,
      //     trigger: 'axis'
      //   }
      // }
    }
  },
  computed: {
    total() {
      return this.TaskReportInfo.reduce((acc, cur) => {
        return acc + cur.total
      }, 0)
    },
    completedTotal() {
      return this.TaskReportInfo.reduce((acc, cur) => {
        return acc + cur.completedTotal
      }, 0)
    },
    progressTotal() {
      return this.TaskReportInfo.reduce((acc, cur) => {
        return acc + cur.progressTotal
      }, 0)
    },
    cancelTotal() {
      return this.TaskReportInfo.reduce((acc, cur) => {
        return acc + cur.cancelTotal
      }, 0)
    }
  },
  created() {
    this.getSalesStatistics(1, '2022-10-24', '2022-10-29')
    this.getRegionCollect('2022-10-24', '2022-10-29')
    this.getTaskReportInfo()
  },
  methods: {
    // 工单统计
    async getTaskReportInfo() {
      const { data } = await getTaskReportInfoAPI('2022-10-01 00:00:00', '2022-10-29 23:59:59')
      this.TaskReportInfo = data
      console.log('info', this.TaskReportInfo)
    },
    // 左边折线图数据
    async getSalesStatistics(type, start, end) {
      const { data } = await getSalesStatisticsAPI(type, start, end)
      // console.log(data)
      if (this.ind === 0) {
        // 定义年月日转星期的函数
        const weekDay = function(time) {
          let latest = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
          return latest[new Date(time).getDay()]
        }
        this.option1.xAxis.data = data.xAxis.map(d => weekDay(d))
        this.option1.series[0].data = data.series.map(d => d / 100)
      } else if (this.ind === 1) {
        this.option1.xAxis.data = data.xAxis
        this.option1.series[0].data = data.series.map(d => d / 100)
      } else {
        this.option1.xAxis.data = data.xAxis
        this.option1.series[0].data = data.series
      }
    },
    // 右边柱状图数据
    async getRegionCollect(start, end) {
      const { data } = await getRegionCollectAPI(start, end)
      console.log('area', data)
    },
    getInfo(i) {
      // console.log(i)
      this.ind = i
      if (i === 0) {
        this.getSalesStatistics(1, '2022-10-24', '2022-10-29')
      } else if (i === 1) {
        this.getSalesStatistics(1, '2022-10-01', '2022-10-29')
      } else {
        this.getSalesStatistics(2, '2022-01-01', '2022-10-29')
      }
    }
  },
  mounted() {
    this.$store.dispatch('user/getUserInfoAction', this.$store.getters.userId)
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }


}

.bgc1,
.bgc2,
{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  height: calc(20vh - 24px);
  min-height: 166px;
  background-color: #e9f3ff;
  border-radius: 20px;
  background-image: url("~@/assets/task.png");
  background-repeat: no-repeat, no-repeat;
  background-position: 420px 40px, calc(100% - 12px) 100%;
  padding: 20px;

  .header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    .title {
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      font-size: 16px;
      font-weight: 600;
      color: #333;

      .sub-title {
        margin-left: 10px;
        font-size: 12px;
        font-weight: 400;
        color: #999;
      }
    }
  }

  .body {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    .stats {
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;

      .item {
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;

        .num {
          text-shadow: 2px 4px 7px rgb(85 132 255 / 50%);
          color: #072074;
          height: 50px;
          font-size: 36px;
          font-weight: 600;
          line-height: 50px;
        }

        .text {
          height: 17px;
          margin-top: 3px;
          font-size: 12px;
          font-weight: 400;
          color: #91a7dc;
          line-height: 17px;
        }
      }
    }
  }
}

.bgc2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  height: calc(20vh - 24px);
  min-height: 166px;
  background-color: #fbefe8;
  border-radius: 20px;
  background-image: url("~@/assets/bgc2.png");
  background-repeat: no-repeat, no-repeat;
  background-position: 300px 50px, calc(100% - 12px) 100%;

  .num {
    text-shadow: 2px 4px 7px rgb(255 99 85 / 50%) !important;
    color: #ff5757 !important;
  }

  .text {
    color: #de9690 !important;
  }
}

.bg3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  height: calc(60vh - 72px);
  min-height: 538px;
  background: #fff;
  border-radius: 20px;
  padding: 20px;

  .header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    .title {
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      font-size: 16px;
      font-weight: 600;
      color: #333;

      .sub-title {
        margin-left: 10px;
        font-size: 12px;
        font-weight: 400;
        color: #999;
      }
    }
  }

  .body {
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 20px;
  }
}

.sku-sale-collect {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  height: calc(40vh - 68px);
  min-height: 352px;
  margin-top: 20px;
  background: #fff;
  border-radius: 20px;
  padding: 20px;

  .header {
    display: flex;

    .title {
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      font-size: 16px;
      font-weight: 600;
      color: #333;

      .sub-title {
        margin-left: 10px;
        font-size: 12px;
        font-weight: 400;
        color: #999;
      }
    }

    .week-month-year {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      width: 129px;
      height: 34px;
      background: rgba(233, 243, 255, .37);
      border-radius: 10px;

      .item {
        width: 37px;
        height: 25px;
        font-size: 14px;
        color: #9ca3b4;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .isChecked {
        background: #fff;
        -webkit-box-shadow: 0 0 4px 0 rgb(0 0 0 / 11%);
        box-shadow: 0 0 4px 0 rgb(0 0 0 / 11%);
        border-radius: 7px;
        font-weight: 600;
        color: #333;
      }
    }
  }
}

.charts {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;

  .chart {
    position: relative;
    display: inline-block;
    width: 50%;
    height: 320px;
  }
}

.partner-node-collect {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  height: calc(40vh - 48px);
  min-height: 353px;
  background: #fff;
  border-radius: 20px;
}

.abnormal-equipment {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  height: calc(40vh - 48px);
  min-height: 353px;
  background: #fff;
  border-radius: 20px;
}
</style>
